<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品列表</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="style/css/basic.css" />
		<link rel="stylesheet" href="style/css/product_list.css" />
		<script type="text/javascript" src="style/plugin/mui/js/mui.min.js"></script>
		<script type="text/javascript" src="style/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="style/mockjs/dist/mock.js"></script>
		<script type="text/javascript" src="style/js/vue.min.js"></script>
		<script type="text/javascript" src="style/js/vue-resource.js"></script>
		<script type="text/javascript" src="style/js/basic.js"></script>
	</head>

	<body>
		<div id="prolist">
			<div id="header">
				<h1>产品列表</h1>
				<span class="backicon"></span>
			</div>
			<div class="body">
				<div class="select">
					<div class="select_items">
						<a href="javascript:void(0);" class="product_classify " @tap="showtype">
							<span class="default_c" :class="{active:pflag}">产品分类</span>
						</a>
						<a href="javascript:void(0);" class="product_sort" state="0" @tap="jifensort">
							<span :class="jfen==0?'default_class':jfen==1?'order_up':'order_down'">积分排序</span>
						</a> 
						<a href="javascript:;" @tap="jumpMyinter">  
							<span>我能兑换</span>  
						</a> 
					</div> 
					<div class="item_options" v-if="pflag">
						<ul>
							<li :class="{select_active:sflag==index}" v-for="(ptype,index) in protype" @tap="seltype(index)">{{ptype.title}}</li>
						</ul>
					</div>
				</div>
				<div class="mask" v-show="pflag"></div>
	
				<div class="list" id="refreshContainer">
					<ul>
						<li v-for="(item,index) in productList" @tap="jumppdetail(index)">
							<a href="javascript:;"> 
								<div class="list_left_img">
									<img :src="htp+item.thumb_pic">
								</div>
								<div class="list_right_text">
									<span>{{item.title}}</span>
									<span>礼品数量：{{item.stock}}{{item.unit}}</span>
									<span class="text_color">积分：{{item.price}}</span>
								</div>
							</a>
	
						</li>
						<!--<li v-for="(item,index) in productList2" v-if="flag==1">
							<a href="product_details.html"> 
								<div class="list_left_img">
									<img :src="item.thumb_pic">
								</div>
								<div class="list_right_text">
									<span>{{item.title}}</span>
									<span>礼品数量：{{item.stock}}{{item.unit}}</span>
									<span class="text_color">积分：{{item.spend_score}}</span>
								</div>
							</a>
	
						</li>-->
					</ul>
				</div>
			</div>
		</div>
		
	</body>
	<script>

        new Vue({
        	el:"#prolist",
        	data:{
        		protype:"",
        		pflag:false,
        		sflag:0,
        		productList:"",
        		jfen:0,
        		productList2:"",
        		flag:0,
        		htp:"",
        		ticket:"",
				sign:""
        	},
        	computed:{
        		
        	},
        	methods:{
        		showtype:function(){
        			this.pflag=!this.pflag
        		},
        		jumppdetail:function(dIndex){
        			openurl_can("product_details",this.productList[dIndex].good_no)
        		},
        		seltype:function(sIndex){
        			this.sflag=sIndex;
        			this.pflag=false;
        			this.$http.post(domain+"/score_good/getCategoryList?t="+this.ticket+"&sign="+this.sign,{emulateJSON:true}).then(
			            function (res) {
			                // 处理成功的结果
			                if(res.body.code==1){
			                  console.log(res.body)	
			                  this.protype=res.body.data;
			                  var p=1;
						var that=this; 
						mui.plusReady(function(){
							
							mui.init({ 
							  pullRefresh : {
							    container:"#refreshContainer",
							    down : {
							      style:'circle',
							      color:'#2BD009', 
							      height:'50px',
							      range:'100px', 
							      offset:'0px', 
							      contentdown:null,
							      auto: true,
							      callback :pullrefesh()  	      
							    }
							  }
							}); 
							function pullrefesh(){
//								alert("1")
								that.$http.post(domain+"/score_good/getList?t="+that.ticket+"&sign="+that.sign,{
							      	page_id:p++,
							      	page_size:2,
							      	cate_no:that.protype[that.sflag].cate_no
							      },{emulateJSON:true}).then(
						            function (res) {
						                // 处理成功的结果
//						                alert(that.protype[sIndex].cate_no)
						                console.log(res.body) 
						                if(res.body.code==1){	    
						                  if(res.body.data.length==0){
						                	mui.toast("没有更多了")
						                  }else{
						                  	that.productList=res.body.data.list;	
							        		if(that.jfen==1){
								        		that.productList=that.productList.sort(that.compareUp("spend_score"))
								        	}else if(that.jfen==2){
								        		that.productList=that.productList.sort(that.compareDown("spend_score"))
								        	}
		
						                  }
						                }else{
						                	mui.toast("暂无商品")
						                }
						            },function (res) {
						            // 处理失败的结果
						            console.log(res) 
						            }
						        ).then(function(){
//						        	mui('#refreshContainer').pullRefresh().endPulldownToRefresh();  
						        });
							}
						}) 
			                } 
			            },function (res) {
			            // 处理失败的结果
			            console.log(res) 
			            }
			        )
        		},
        		jifensort:function(){
        			if(this.jfen==0){
        				this.jfen=1
        				console.log(this.productList[0])
        				this.productList=this.productList.sort(this.compareUp("spend_score"))
        				console.log(this.prolistSort)
        			}
        			else if(this.jfen==1){
        				this.jfen=2
        				this.productList=this.productList.sort(this.compareDown("spend_score"))
        			}
        			else if(this.jfen==2){
        				this.jfen=1
        				this.productList=this.productList.sort(this.compareUp("spend_score"))
        			}
        		},
        		jumpMyinter:function(){
        			openurl("my_intergral")
        		},
        		compareUp:function(propertyName){
        			if ((typeof this.productList[0][propertyName]) != "number") { // 属性值为非数字
						return function(object1, object2) {
							var value1 = object1[propertyName];
							var value2 = object2[propertyName];
							return value1.localeCompare(value2);
						}
					}
					else {
						return function(object1, object2) { // 属性值为数字
							var value1 = object1[propertyName];
							var value2 = object2[propertyName];
							return value1 - value2;
						}
					}
        		},
        		compareDown:function(propertyName){
        			if ((typeof this.productList[0][propertyName]) != "number") { // 属性值为非数字
						return function(object1, object2) {
							var value1 = object1[propertyName];
							var value2 = object2[propertyName];
							return value2.localeCompare(value1);
						}
					}
					else {
						return function(object1, object2) { // 属性值为数字
							var value1 = object1[propertyName];
							var value2 = object2[propertyName];
							return value2 - value1;
						}
					}
        		}
        	},
        	created:function(){
                this.ticket=localStorage.getItem("tick")
                this.sign=localStorage.getItem("sig")
        	},
        	mounted:function(){
        		this.htp=domain2
        		var idx=localStorage.getItem("nidx")
        		if(idx=="none"){
        			localStorage.removeItem("nidx")
        			this.$http.post(domain+"/score_good/getCategoryList?t="+this.ticket+"&sign="+this.sign,{emulateJSON:true}).then(
			            function (res) {
			                // 处理成功的结果
			                if(res.body.code==1){
			                  console.log(res.body)	
			                  this.protype=res.body.data;
			                   
			                } 
			            },function (res) {
			            // 处理失败的结果
			            console.log(res) 
			            }
			        ).then(function(){
				        var p=1;
						var that=this; 
						mui.plusReady(function(){
							mui.init({
							  pullRefresh : {
							    container:"#refreshContainer",
							    down : { 
							      style:'circle',
							      color:'#2BD009', 
							      height:'50px',
							      range:'100px', 
							      offset:'0px', 
							      contentdown:null,
							      auto: true,
							      callback :pullrefesh  	      
							    }
							  }
							}); 
							function pullrefesh(){
//								alert("1")
								that.$http.post(domain+"/score_good/getList?t="+that.ticket+"&sign="+that.sign,{
							      	page_id:p++,
							      	page_size:2,
							      	cate_no:that.protype[that.sflag].cate_no
							      },{emulateJSON:true}).then(
						            function (res) {
						                // 处理成功的结果
						                console.log(res.body) 
						                if(res.body.code==1){
						                  if(res.body.data.length==0){
						                	mui.toast("没有更多了")
						                  }else{
						                  	that.productList=res.body.data.list; 
							        		if(that.jfen==1){
								        		that.productList=that.productList.sort(that.compareUp("spend_score"))
								        	}else if(that.jfen==2){
								        		that.productList=that.productList.sort(that.compareDown("spend_score"))
								        	}
		
						                  }
						                }else{
						                	mui.toast("暂无商品")
						                }
						            },function (res) {
						            // 处理失败的结果
						            console.log(res) 
						            }
						        ).then(function(){
						        	mui('#refreshContainer').pullRefresh().endPulldownToRefresh();   
						        });
							}
						}) 
						
			        });
        		}else if(idx!="none"){
        			this.$http.post(domain+"/score_good/getCategoryList?t="+this.ticket+"&sign="+this.sign,{emulateJSON:true}).then(
			            function (res) {
			                // 处理成功的结果
			                if(res.body.code==1){
			                  console.log(res.body)	
			                  this.protype=res.body.data;
			                   
			                } 
			            },function (res) {
			            // 处理失败的结果
			            console.log(res) 
			            }
			        ).then(function(){
				        var p=1;
						var that=this; 
						mui.plusReady(function(){
							mui.init({
							  pullRefresh : {
							    container:"#refreshContainer",
							    down : { 
							      style:'circle',
							      color:'#2BD009', 
							      height:'50px',
							      range:'100px', 
							      offset:'0px', 
							      contentdown:null,
							      auto: true,
							      callback :pullrefesh  	      
							    }
							  }
							}); 
							function pullrefesh(){
//								alert("1")
								that.$http.post(domain+"/score_good/getList?t="+that.ticket+"&sign="+that.sign,{
							      	page_id:p++,
							      	page_size:2,
							      	cate_no:that.protype[idx].cate_no
							      },{emulateJSON:true}).then(
						            function (res) {
						                // 处理成功的结果
						                console.log(res.body) 
				 		                if(res.body.code==1){
						                  that.productList=res.body.data.list;
						                  if(res.body.data.length==0){
						                	mui.toast("没有更多了")
						                	p=1
						                  }else{
							        		if(that.jfen==1){
								        		that.productList=that.productList.sort(that.compareUp("spend_score"))
								        	}else if(that.jfen==2){
								        		that.productList=that.productList.sort(that.compareDown("spend_score"))
								        	}
		
						                  }
						                }else{
						                	mui.toast("暂无商品")
						                }
						            },function (res) {
						            // 处理失败的结果
						            console.log(res) 
						            }
						        ).then(function(){
						        	mui('#refreshContainer').pullRefresh().endPulldownToRefresh();   
						        });
							}
						}) 
						
			        });
			        this.sflag=idx
        			localStorage.removeItem("nidx")
        		}
        		
        	}
       })
	</script>

</html>
